<template>
  <div class="step-form-warp" :style="styleHeight()">
    <div class="user-role-warp-box" ref="userRoleWarpBoxRef">

      <el-form :inline="true"  ref="" size="small" style="height:51px;overflow:hidden;">
        <el-form-item label="学号">
          <el-input placeholder="报备人学号" v-model="reportQueryParam.stuNumber" ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="报备人姓名" v-model="reportQueryParam.userName" ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="reportQueryParam.banId" placeholder="选择班级">
            <el-option v-for="(item,index) in allGrade" :key="index" :label="item.bname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getallReports">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" @click="resetReportQueryParam">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :border="true"
          ref="multipleTable"
          :data="allReport"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{}"
      >
        <el-table-column
            type="selection"
            width="">
        </el-table-column>
        <el-table-column
            prop="stuNumber"
            label="学号"
            >
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
            prop="userName"
            label="报备人姓名"
            >
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
            prop="bName"
            label="报备人班级"
            >
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            >
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true"
            prop="dizhi"
            label="当前所在地">
        </el-table-column>
        <el-table-column
            prop="isAtSchool"
            label="是否在校">
          <template slot-scope="scope">
            {{scope.row.isAtSchool==0?'否':'是'}}

          </template>
        </el-table-column>
        <el-table-column
            prop="isYiSi"
            label="是否疑似病例">
          <template slot-scope="scope">
            {{scope.row.isYiSi==1?'否':'是'}}

          </template>
        </el-table-column>
        <el-table-column
            prop="isJryq"
            label="是否进入或途径疫区">
          <template slot-scope="scope">
          {{scope.row.isJryq==1?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="提交时间"
        width="200">
        </el-table-column>
        <el-table-column label="系统判定">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isZc" type="success">正常</el-tag>
            <el-tag v-else type="danger">异常</el-tag>
          </template>
        </el-table-column>

      </el-table>

      <div style="text-align: center;margin-top: 20px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=reportQueryParam.pageNumber
            :page-sizes="[10, 50, 100, 200]"
            :page-size=reportQueryParam.pageSize
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total=PageInfo.total>
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>

import {getAllClassByFid} from "@/api/user";
import {getSession} from "@/utils/storage";
import {reportsSearch} from '@/api/report/index'
export default {
  name: 'stepForm',
  data() {
    return {
      fid:'',
      allReport:[],
      allGrade:{},
      reportQueryParam:{
        banId:'',
        fid:'',
        userName:'',
        pageSize:10,
        pageNumber: 1,
        stuNumber:''
      },
      PageInfo:{
        total:0
      }
    }
  },
  activated() {
    this.styleHeight()
  },
  mounted() {
    this.getUserInfo();
    this.getAllClass(this.fid);
    this.getallReports();
  },
  methods: {
    resetReportQueryParam(){
      this.reportQueryParam = {
        banId:'',
            fid:'',
            userName:'',
            pageSize:10,
            pageNumber: 1,
            stuNumber:''
      }
    },
    search() {
      this.getallReports();
    },
    //获取数据
    getallReports(){
      reportsSearch(this.reportQueryParam).then(res=>{
       if (res.data!=null){
         this.allReport = res.data.list
         this.PageInfo.total = res.data.page.total;
       }else {
         this.allReport = []
         this.PageInfo.total = 0;
       }
      }).catch()
    },
    //获取缓存
    getUserInfo(){
      this.fid = getSession('userInfo').finstructor.id;
      this.reportQueryParam.fid=getSession('userInfo').finstructor.id;
    },
    handleSizeChange(val) {
      this.reportQueryParam.pageSize=val;
      this.getAllLeaves();
    },
    handleCurrentChange(val) {
      this.reportQueryParam.pageNumber=val;
      this.getAllLeaves();
    },
    //通过辅导员id查询所管辖的班级
    getAllClass(value){
      getAllClassByFid(value).then(res => {
        this.allGrade = res.data
      }).catch(() => {console.log("xxx") })
    },
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 114px)`
          }
        } else {
          return {
            height: `calc(100vh - 80px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 80px)`
        }
      }
    },
  }

}
</script>

<style scoped lang="scss">
.step-form-warp {
  border-radius: 0px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: auto;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
  margin: 15px;
  .step-form-warp-box {
    max-width: 1000px;
    margin: 30px auto;
    ::v-deep .el-step__title.is-process {
      color: #09f !important;
      font-weight: normal !important;
    }
    ::v-deep .el-step__head.is-process {
      color: #09f !important;
      border-color: #09f !important;
    }
    ::v-deep .is-success {
      .el-step__line {
        background-color: #67c23a !important;
      }
    }
  }
}
</style>